<template>
  <div class="header-wrap">
     <!-- 标题 -->
    <div class="header-bar">
      <div class="title">
        <h1>基于社会行为数据城市认知系统</h1>
      </div>
      <div class="left">
        <Nav/>
      </div>
      <div class="right">
        <div class="system-time">
          {{getNowFormatDate()}}
        </div>
        <div class="user-login header-btn" @click="back">
          <i class="iconfont icon-fanhui"></i>
          返回
        </div>
        <!-- 通州亦庄label -->
        <div class="back-home header-btn" @click="back">
          <i class="iconfont icon-home2"></i>
          <!-- {{home}} -->
        </div>
        <!-- 测试 -->
          <!-- <MenuText/> -->
        <!-- 通州亦庄 -->
        <!-- <div class="back-home header-btn">
          <el-dropdown @command="handleCommand" trigger="click">
            <span><i class="iconfont icon-home2 el-dropdown-link"></i>{{home}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in curHomeList" :key="index" :command="item.value">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div> -->
      </div>
    </div>
    <!-- 步骤条 -->
    <Step/>
    <!-- 选项 -->
    <OptionsGroup/>
    <SelectGroup/>
  </div>
</template>

<script>
import Nav from "./Nav";
import Step from "./Step";
import OptionsGroup from "./OptionGroup";
import SelectGroup from "./SelectGroup";
// import MenuText from '@/components/Text/Menutext' // 测试

export default {
  name: "HeaderWrap",
  components: {
    Nav,
    Step,
    OptionsGroup,
    SelectGroup,
    // MenuText  // 测试
  },
  data(){
    return{
      id:1
    }
  },
  computed:{
  },
  methods:{
    getNowFormatDate() {//获取当前时间
      var date = new Date();
      // var seperator1 = " - ";
      var seperator2 = ":";
      var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
      var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
      var currentdate = date.getFullYear() + '年'  + month  + '月'  + strDate
          + "日 "  + date.getHours()  + seperator2  + date.getMinutes()
      return currentdate;
    },
    handleCommand(command){
      this.$store.dispatch('changeRegion',command);
    },
    back(){
      this.$router.push({path: '/home'});
    }
  },
  created() {
    //获取路由页面传递的id
    this.id = this.$route.query.id
  },
};
</script>

<style lang="stylus" scoped>
// @import url('//at.alicdn.com/t/font_1058453_42fi8binkvv.css');
@import url('//at.alicdn.com/t/font_1151041_s68eetj4fbo.css');

// #00f6ff 主色

.header-wrap
  width 100%
  position relative
  height 50px

  // .el-row
  //   line-height 60px

  //   .nav
  //     text-align center
  //     border-right 1px solid #3e4967
  //     width 60px
  //     padding-right 0

  //   .nav:hover
  //     background #3e4967 
  //     cursor pointer

  // .el-dropdown
  //   color #13ffd7
    
  .header-bar
    height 100%
    position relative
    border-top 2px solid #00f6ff

    .left
      float left 

    .right 
      float right

      div
        float left

      .header-btn
        background #303a58
        line-height 32px
        padding 0 10px
        font-size 12px
        color #c0c4cc
        box-shadow inset 0 0 3px 3px rgba(255,255,255,.1)
        margin 8px 10px 0
        cursor pointer

        i
          font-size 14px

      .system-time
        line-height 50px
        margin 0 10px
        color #c0c4cc

    .title
      height 60px
      width 580px
      background url('../../assets/img/logo_bg.png') no-repeat
      background-size 100% 100%
      position absolute
      z-index 1
      left 50%
      top -2px
      margin-left -302.5px

      h1
        letter-spacing 2px
        line-height 64px
        font-size 24px
        color #fff
        margin 0 auto
        text-align center    
        // background-image:-webkit-linear-gradient(bottom, #ff5f00, #fff); 
        // -webkit-background-clip:text; 
        // -webkit-text-fill-color:transparent; 


  // .sub-title
  //   font-size 16px
  //   color #fff
  //   text-align left 
  //   margin-left -30px

  // .options
  //   width: 400px;
  //   position: absolute;
  //   z-index: 50;
  //   top: 75px;
  //   left: 15px;
  //   background: #303030;

.header-wrap /deep/ .el-dropdown
  color #c0c4cc
</style>